<template>
  <div class="main" id="pagetop">
    <article id="v2_spot">
      <h1>地铁游览英雄城</h1>
      <p class="v2_lead">
        英雄城南昌，充满活力的都市，人杰地灵的天堂！
        <br />乘坐地铁就能游玩南昌大部分景点，告别堵车，方便快捷。
      </p>
      <div class="v2_contentsInr">
        <div class="v2_picCol1 v2_mb15 v2_pt15Sp">
          <img src="/img/travel/route_map.jpg" width="803px" height="568px" />
        </div>

        <!-- /.v2_contentsInr -->
      </div>

      <section id="v2_metroArea">
        <h2 class="v2_h2Center">请选择您要前往的区域</h2>
        <h3 class="v2_h3Center">南昌地铁可达</h3>

        <div class="v2_wrapper show1">
          <a
            class="v2_link"
            href="tripdetail.html"
            target="_blank"
            v-for="item in $store.state.scenicspot"
            :key="item.spot"
          >
            <div class="v2_pic pic_show">
              <img :src="item.path" width="362" height="241" alt class="spot_pic" />
            </div>
            <h4 class="spot-name">{{item.spot}}</h4>
            <p class="v2_txt">{{item.note}}</p>
          </a>
          <!-- /.v2_wrapper -->
        </div>

        <!-- / #v2_metroArea -->
      </section>

      <div class="v2_contentsInr">
        <section id="v2_otherArea">
          <h3 class="v2_h3Center">其他区域</h3>
          <div class="v2_wrapper otherflex">
            <a
              class="v2_link"
              href="#"
              target="_blank"
              v-for="item in $store.state.others"
              :key="item.place"
            >
              <div class="v2_pic pic_show">
                <img :src="item.path" width="264" height="176" alt class="spot_pic" />
                <div class="describe">{{item.describe}}</div>
              </div>
              <p class="v2_othertxt">{{item.place}}</p>
            </a>
            <!-- /.v2_wrapper -->
          </div>

          <!-- / #v2_otherArea -->
        </section>

        <!-- /.v2_contentsInr -->
      </div>

      <section class="v2_relatedLinksCard type02">
        <h2 class="v2_h2Center">相关链接</h2>
        <div class="v2_wrapper v2_mb30">
          <a href="#">
            <div class="v2_block v2_1">
              <h3>下载应用程序</h3>
              <div class="v2_pic">
                <img src="../../../public/img/travel/app_logo.png" width="63" height="63" alt />
              </div>
              <!-- / .v2_block -->
            </div>
          </a>

          <a href="#">
            <div class="v2_block v2_2">
              <h3>查询票价、换乘</h3>
              <div class="v2_pic">
                <img src="../../../public/img/travel/ticket.png" width="47" height="48" alt />
              </div>
              <!-- / .v2_block -->
            </div>
          </a>

          <a href="#">
            <div class="v2_block">
              <h3>南昌地铁指南</h3>
              <div class="v2_pic">
                <img src="../../../public/img/travel/guide_book.png" width="97" height="66" alt />
              </div>
              <!-- / .v2_block -->
            </div>
          </a>

          <a href="#" target="_blank">
            <div class="v2_block">
              <h3>旅行攻略</h3>
              <div class="v2_pic">
                <img src="../../../public/img/travel/travel_guide.jpeg" width="100" height="67" alt />
              </div>
              <!-- / .v2_block -->
            </div>
          </a>

          <a href="#" target="_blank">
            <div class="v2_block">
              <h3>去哪儿团游</h3>
              <div class="v2_pic">
                <img src="../../../public/img/travel/group_trip.png" width="93" height="35" alt />
              </div>
              <!-- / .v2_block -->
            </div>
          </a>
        </div>
      </section>
    </article>
  </div>
</template>

<script>
import store from "../../store/index";
export default {
  store
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.main {
  max-width: 1280px;
  padding-top: 120px;
  width: 85%;
  margin: 0 auto;
  text-align: center;
}
h1 {
  font-size: 2rem;
  position: relative;
}
h1::before {
  content: "";
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 120%;
  width: 5%;
  height: 5px;
  background-color: #00467e;
}
h1::after {
  content: "";
  display: inline-block;
  position: absolute;
  right: 50%;
  top: 120%;
  width: 5%;
  height: 5px;
  background-color: #00a3d9;
}
.v2_contentsInr {
  padding: 0 20%;
}
.v2_picCol1 img {
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
.v2_relatedLinksCard a {
  display: inline-block;
  width: 19%;
  height: auto;
  border: solid 1px #ccc;
  margin: 2% 0;
}
.v2_relatedLinksCard a::before {
  content: "";
  display: block;
  background-color: rgba(0, 0, 0, 0.1);
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.2s;
  position: relative;
  left: 0;
  top: 0;
  z-index: 4;
  box-shadow: rgba(0, 0, 0, 0.1) 5px 5px 5px;
}
.v2_relatedLinksCard a:hover::before {
  opacity: 1;
}
.v2_relatedLinksCard div {
  position: relative;
  left: 0;
  bottom: 100%;
  z-index: 3;
}
.v2_relatedLinksCard {
  margin-bottom: 5%;
}
#v2_metroArea a {
  display: inline-block;
  width: 32%;
  height: auto;
  font-weight: bold;
}
#v2_otherArea a {
  display: inline-block;
  width: 24%;
  height: auto;
  font-weight: bold;
  margin: 0 15px 15px;
}
.pic_show {
  margin: 0 auto;
  height: 60%;
  position: relative;
}
.pic_show::before {
  content: "";
  display: inline-block;
  position: absolute;
  left: 0%;
  top: 100%;
  width: calc(20% - 1px);
  height: 4px;
  background-color: #00a3d9;
}
.pic_show::after {
  content: "";
  display: inline-block;
  position: absolute;
  left: 20%;
  top: 100%;
  width: 80%;
  height: 4px;
  background-color: #00467e;
}
h1 {
  color: #00467e;
}
.v2_h2Center {
  color: #00467e;
  font-size: 2rem;
  margin-top: 5%;
  margin-bottom: 2%;
}
.v2_h3Center {
  color: #444;
  font-size: 1.5rem;
  margin-top: 5%;
  margin-bottom: 3%;
}
.v2_wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.otherflex {
  justify-content: center;
}
.v2_block h3 {
  display: inline-block;
  margin: 5% 0;
}
.v2_block div img {
  width: 60%;
  height: auto;
  margin: 0 auto;
}
.v2_1 div img {
  width: 30%;
}
.v2_2 div img {
  width: 30%;
}
.v2_lead {
  font-family: "微软雅黑";
  margin-top: 40px;
  margin-bottom: 30px;
  font-size: 1.1rem;
  line-height: 2rem;
}
.v2_txt {
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  color: #666;
  font-size: 0.9rem;
  width: 90%;
  margin-top: 3%;
  margin-bottom: 5%;
  text-overflow: ellipsis;
}
.v2_othertxt {
  color: azure;
  background-color: rgba(0, 0, 0, 0.5);
  width: 102%;
  height: 15%;
  line-height: 200%;
  position: relative;
  bottom: 10%;
  right: 1%;
  box-shadow: rgba(0, 0, 0, 0.8) 0 5px 2px;
}
h4 {
  text-align: left;
  font-size: 1.2rem;
  padding: 2%;
  margin-top: 3%;
}
h3 {
  font-size: 0.8rem;
}
.spot_pic {
  opacity: 0.8;
  width: 100%;
  height: auto;
  margin: 0 auto;
}
.v2_link:hover h4 {
  text-decoration: underline;
}
.v2_link:hover p.v2_othertxt {
  text-decoration: underline;
}
.show1 .v2_link:hover img {
  opacity: 1;
  transform: scale(0.95);
}
.v2_link img {
  border-radius: 6px 6px 0 0;
  height: 100%;
}
.spot-name::after {
  content: "";
  width: 18px;
  height: 15px;
  background: url(../../../public/img/travel/icon_blank_gray.png);
  display: inline-block;
  background-size: 18px auto;
  margin-left: 5px;
}
.v2_othertxt::after {
  content: "";
  width: 18px;
  height: 15px;
  background: url(../../../public/img/travel/icon_blank.png);
  display: inline-block;
  background-size: 18px auto;
  margin-left: 5px;
}


.describe {
  font-size: 0.8rem;
  line-height: 1.3rem;
  text-align: center;
  position: absolute;
  margin: 0 auto;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding-top: 16px;
  border-radius: 6px 6px 0 0;
  bottom: 0;
  height: 0;
}
.otherflex .v2_link:hover .describe {
  transition: height 2s ease-in-out;
  height: 90%;
}
</style>